<template>
  <view class="info-page">
    <Navbar title="金仕咨询" background="#fff"></Navbar>
    <view class="banner-box">
      <!-- 轮播图 -->
      <view class="swiper-container">
        <swiper class="swiper" indicator-dots="true" autoplay="true" interval="3000" duration="500" circular="true">
          <swiper-item v-for="(item, index) in bannerList" :key="index">
            <image :src="item.image" class="banner-image" mode="aspectFill"></image>
          </swiper-item>
        </swiper>
      </view>
    </view>

    <!-- 动态资讯区域 -->
    <view class="info-section">
      <view class="section-header">
        <view class="title-bar">
          <view class="blue-bar"></view>
          <text class="section-title">动态资讯</text>
        </view>
        <text class="view-more" @click="viewMoreInfo">查看更多 ></text>
      </view>

      <view class="info-list">
        <view v-if="infoList.length === 0" class="empty-state">
          <text class="empty-text">暂无资讯</text>
        </view>
        <view class="info-item" v-for="(item, index) in infoList" :key="index" @click="viewInfoDetail(item)">
          <view class="info-content">
            <text class="info-title">{{ item.title }}</text>
            <view class="info-author">
              <image :src="item.avatar" class="author-avatar" mode="aspectFill"></image>
              <text class="author-name">{{ item.author }}</text>
            </view>
            <text class="info-desc">{{ item.description }}</text>
            <view class="info-footer">
              <view class="time-info">
                <image src="/static/info/time.png" class="time-icon" mode="aspectFit"></image>
                <text class="time-text">{{ item.time }}</text>
              </view>
              <text class="read-count">阅读量 {{ item.readCount }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>
	<view class="ask-btn-box">
	<view class="ask-btn" @click="askQuestion">
		<image src="/static/info/icon_send.png" class="ask-icon" mode="aspectFit"></image>
		<text class="ask-text">我要提问</text>
	</view>
	</view>

	<!-- 发布问题弹窗 -->
	<u-popup v-model="showAskPopup" mode="bottom" border-radius="32rpx 32rpx 0 0" height="50%">
		<view class="ask-popup">
			<view class="popup-header">
				<text class="popup-title">发布问题</text>
				<text class="popup-close" @click="closeAskPopup">×</text>
			</view>

			<view class="popup-content">
				<view class="input-section">
					<text class="input-label">问题内容</text>
					<textarea
						class="question-textarea"
						placeholder="请详细描述您的问题，这样我们才能更好地帮助您..."
						v-model="questionContent"
						maxlength="1000"
						show-confirm-bar="false"
						auto-height
					></textarea>
					<view class="char-count">
						<text class="count-text">{{ questionContent.length }}/1000</text>
					</view>
				</view>
			</view>

			<view class="popup-footer">
				<button class="submit-btn" :disabled="!canSubmit" @click="submitQuestion">
					<text class="submit-text">发布问题</text>
				</button>
			</view>
		</view>
	</u-popup>
    <!-- 问答专区 -->
    <view class="qa-section">
      <view class="section-header">
        <view class="title-bar">
          <view class="blue-bar"></view>
          <text class="section-title">问答专区</text>
        </view>
        <view class="header-actions">
          <text class="view-more" @click="viewMoreQA">查看更多 ></text>
        </view>
      </view>

      <view class="qa-list">
        <view v-if="qaList.length === 0" class="empty-state">
          <text class="empty-text">暂无问答</text>
        </view>
        <view class="qa-item" v-for="(item, index) in qaList" :key="index">
          <view class="qa-question">
            <view class="question-icon">
              <text class="question-text">问</text>
            </view>
            <text class="question-content">{{ item.question }}</text>
          </view>
          <view class="qa-answer">
            <image src="/static/info/icon_answer.png" class="answer-avatar" mode="aspectFill"></image>
            <view class="answer-content">
              <text class="answer-text" :class="{ 'expanded': item.isExpanded }">{{ item.answer }}</text>
              <text class="expand-btn" v-if="item.needExpand" @click="expandAnswer(item)">
                {{ item.isExpanded ? '收起' : '展开 >' }}
              </text>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import Navbar from "../../components/Navbar.vue";
import api from "../../config/api.js";

export default {
  components: {Navbar},
  data() {
    return {
      // 轮播图数据
      bannerList: [
        {
          image: '/static/image_副本/mine_bg.png',
          url: ''
        },
        {
          image: '/static/image_副本/default_service.png',
          url: ''
        },
        {
          image: '/static/image_副本/user_avatar.png',
          url: ''
        }
      ],
      // 动态资讯数据
      infoList: [],
      // 问答专区数据
      qaList: [],

      // 发布问题相关
      showAskPopup: false,
      questionContent: ''
    }
  },
  computed: {
    // 是否可以提交
    canSubmit() {
      return this.questionContent.trim().length
    }
  },
  onLoad() {
    this.loadData();
  },
  methods: {
    // 加载数据
    async loadData() {
      try {
        // 显示加载提示
        uni.showLoading({
          title: '加载中...'
        });

        // 并行获取资讯和问答数据
        const [articleRes, qaRes] = await Promise.all([
          this.getArticleList(),
          this.getQaList()
        ]);

        this.infoList = articleRes;
        this.qaList = qaRes;

      } catch (error) {
        console.error('加载数据失败:', error);
        uni.showToast({
          title: '加载失败，请重试',
          icon: 'none'
        });
      } finally {
        uni.hideLoading();
      }
    },

    // 获取资讯列表
    async getArticleList() {
      try {
        const params = {
          pageNo: 1,
          pageSize: 3,
          status: 1, // 只获取已发布的文章
        };

        const response = await api.getArticlePage(params);

        if (response && response.list) {
          return response.list.map(item => ({
            id: item.id,
            title: item.title,
            author: item.author,
            avatar: '/static/default_user.png', // 默认头像
            description: item.summary || this.truncateText(item.content, 50),
            time: this.formatTime(item.publish_time || item.create_time),
            readCount: item.view_count || 0
          }));
        }

        return [];
      } catch (error) {
        console.error('获取资讯列表失败:', error);
        return [];
      }
    },

    // 获取问答列表
    async getQaList() {
      try {
        const params = {
          pageNo: 1,
          pageSize: 3,
          is_public: 1 // 只获取公开的问答
        };

        const response = await api.getQaPage(params);

        if (response && response.list) {
          return response.list.map(item => ({
            id: item.id,
            question: item.question_content,
            answer: item.answer_content || '暂无回复',
            answerAvatar: '/static/info/icon_answer.png',
            needExpand: (item.answer_content && item.answer_content.length > 100),
            isExpanded: false
          }));
        }

        return [];
      } catch (error) {
        console.error('获取问答列表失败:', error);
        return [];
      }
    },

    // 截断文本
    truncateText(text, maxLength) {
      if (!text) return '';
      const plainText = text.replace(/<[^>]*>/g, ''); // 移除HTML标签
      return plainText.length > maxLength ? plainText.substring(0, maxLength) + '...' : plainText;
    },

    // 格式化时间
    formatTime(timeStr) {
      if (!timeStr) return '';

      const now = new Date();
      const time = new Date(timeStr);
      const diff = now - time;

      const minutes = Math.floor(diff / (1000 * 60));
      const hours = Math.floor(diff / (1000 * 60 * 60));
      const days = Math.floor(diff / (1000 * 60 * 60 * 24));

      if (minutes < 60) {
        return `${minutes}分钟前`;
      } else if (hours < 24) {
        return `${hours}小时前`;
      } else if (days < 30) {
        return `${days}天前`;
      } else {
        return time.toLocaleDateString();
      }
    },

    // 查看更多资讯
    viewMoreInfo() {
      uni.navigateTo({
        url: '/pages/article/article'
      });
    },
    // 查看资讯详情
    viewInfoDetail(item) {
      uni.navigateTo({
        url: `/pages/article/detail?id=${item.id}`
      });
    },
    // 查看更多问答
    viewMoreQA() {
      uni.navigateTo({
        url: '/pages/qa/qa'
      });
    },
    // 我要提问
    askQuestion() {
      this.showAskPopup = true;
    },

    // 关闭提问弹窗
    closeAskPopup() {
      this.showAskPopup = false;
      this.resetForm();
    },

    // 重置表单
    resetForm() {
      this.questionContent = '';
    },

    // 提交问题
    async submitQuestion() {
      if (!this.canSubmit) {
        uni.showToast({
          title: '问题内容不能为空',
          icon: 'none'
        });
        return;
      }
      const questionData = {
        user_id: this.userInfo.id,
        question_content: this.questionContent.trim(),
        is_public: 0
      };

      await api.createQa(questionData);
      uni.hideLoading()
      uni.showToast({
        title: '问题发布成功',
        icon: 'success'
      });

      this.closeAskPopup();

      // 刷新问答列表
      this.getQaList().then(qaRes => {
        this.qaList = qaRes;
      });
    },
    // 展开答案
    expandAnswer(item) {
      // 切换展开状态
      this.$set(item, 'isExpanded', !item.isExpanded);
    }
  },

  onShareAppMessage() {
  },
  onShareTimeline() {
  },
}
</script>

<style lang="scss">
.info-page {
  min-height: 100vh;
  overflow: visible;
  padding-bottom: 60rpx;
  position: relative;
  z-index: 1;
  background-color: #f5f5f5;
  .banner-box {
    border-radius: 0 0 32rpx 32rpx;
    background: #FFFFFF;
    display: flex;
    flex-direction: column;
    padding: 32rpx;

    // 轮播图样式
    .swiper-container {
      margin-bottom: 40rpx;
      border-radius: 16rpx;
      overflow: hidden;

      .swiper {
        height: 300rpx;

        .banner-image {
          width: 100%;
          height: 100%;
        }
      }
    }

    // 金刚区导航样式
    .nav-grid {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;

      .nav-item {
        width: 25%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 20rpx 0;

        .nav-icon {
          width: 110rpx;
          height: 110rpx;
          margin-bottom: 16rpx;
        }

        .nav-text {
          font-size: 30rpx;
          color: #333333;
          text-align: center;
          line-height: 1.2;
        }
      }
    }
  }

  // 动态资讯区域样式
  .info-section {
    margin: 24rpx;
    background: #FFFFFF;
    border-radius: 16rpx;
    padding: 32rpx;

    .section-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 32rpx;

      .title-bar {
        display: flex;
        align-items: center;

        .blue-bar {
          width: 8rpx;
          height: 32rpx;
          background: #539DF3;
          border-radius: 4rpx;
          margin-right: 16rpx;
        }

        .section-title {
          font-size: 32rpx;
          font-weight: bold;
          color: #333333;
        }
      }

      .view-more {
        font-size: 28rpx;
        color: #666666;
      }
    }

    .info-list {
      .info-item {
        margin-bottom: 32rpx;
        padding-bottom: 32rpx;
        border-bottom: 1rpx solid #F0F0F0;

        &:last-child {
          margin-bottom: 0;
          padding-bottom: 0;
          border-bottom: none;
        }

        .info-content {
          .info-title {
            font-size: 30rpx;
            font-weight: bold;
            color: #333333;
            line-height: 1.4;
            margin-bottom: 16rpx;
            display: block;
          }

          .info-author {
            display: flex;
            align-items: center;
            margin-bottom: 16rpx;

            .author-avatar {
              width: 48rpx;
              height: 48rpx;
              border-radius: 24rpx;
              margin-right: 12rpx;
            }

            .author-name {
              font-size: 26rpx;
              color: #666666;
            }
          }

          .info-desc {
            font-size: 28rpx;
            color: #666666;
            line-height: 1.4;
            margin-bottom: 16rpx;
            display: block;
          }

          .info-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;

            .time-info {
              display: flex;
              align-items: center;

              .time-icon {
                width: 24rpx;
                height: 24rpx;
                margin-right: 8rpx;
              }

              .time-text {
                font-size: 24rpx;
                color: #999999;
              }
            }

            .read-count {
              font-size: 24rpx;
              color: #999999;
            }
          }
        }
      }
    }
  }

.ask-btn-box {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	padding:0rpx 24rpx;
}
  .ask-btn {
          display: flex;
          align-items: center;
		  background: #539DF3;
          color: #FFFFFF;
          padding: 12rpx 24rpx;
          border-radius: 32rpx;
          font-size: 26rpx;

          .ask-icon {
            width: 32rpx;
            height: 32rpx;
            margin-right: 8rpx;
          }
        }
  // 问答专区样式
  .qa-section {
    margin: 24rpx;
    background: #FFFFFF;
    border-radius: 16rpx;
    padding: 32rpx;

    .section-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 32rpx;

      .title-bar {
        display: flex;
        align-items: center;

        .blue-bar {
          width: 8rpx;
          height: 32rpx;
          background: #539DF3;
          border-radius: 4rpx;
          margin-right: 16rpx;
        }

        .section-title {
          font-size: 32rpx;
          font-weight: bold;
          color: #333333;
        }
      }

      .header-actions {
        display: flex;
        align-items: center;

        .view-more {
          font-size: 28rpx;
          color: #666666;
          margin-right: 24rpx;
        }
      }
    }

    .qa-list {
      .qa-item {
        margin-bottom: 32rpx;
        padding-bottom: 32rpx;
        border-bottom: 1rpx solid #F0F0F0;

        &:last-child {
          margin-bottom: 0;
          padding-bottom: 0;
          border-bottom: none;
        }

        .qa-question {
          display: flex;
          align-items: flex-start;
          margin-bottom: 24rpx;

          .question-icon {
            width: 48rpx;
            height: 48rpx;
            background: #539DF3;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 16rpx;
            flex-shrink: 0;

            .question-text {
              color: #FFFFFF;
              font-size: 28rpx;
              font-weight: bold;
            }
          }

          .question-content {
            font-size: 30rpx;
            color: #333333;
            line-height: 1.4;
            flex: 1;
          }
        }

        .qa-answer {
          display: flex;


          .answer-avatar {
            width: 48rpx;
            height: 48rpx;
            border-radius: 24rpx;
            margin-right: 16rpx;
            flex-shrink: 0;
          }

          .answer-content {
            flex: 1;

            .answer-text {
              font-size: 28rpx;
              color: #666666;
              line-height: 1.4;
              display: block;
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-line-clamp: 2;
              -webkit-box-orient: vertical;

              &.expanded {
                -webkit-line-clamp: unset;
                display: block;
              }
            }

            .expand-btn {
              font-size: 26rpx;
              color: #539DF3;
			  text-align: right;
			  width: 100%;
			  display: block;
            }
          }
        }
      }
    }
  }

  // 空状态样式
  .empty-state {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 80rpx 0;

    .empty-text {
      font-size: 28rpx;
      color: #999999;
    }
  }

  // 发布问题弹窗样式
  .ask-popup {
    height: 100%;
    display: flex;
    flex-direction: column;

    .popup-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 32rpx;
      border-bottom: 1rpx solid #f0f0f0;

      .popup-title {
        font-size: 32rpx;
        font-weight: bold;
        color: #333333;
      }

      .popup-close {
        font-size: 48rpx;
        color: #999999;
        line-height: 1;
        padding: 8rpx;
      }
    }

    .popup-content {
      flex: 1;
      padding: 32rpx;
      overflow-y: auto;

      .input-section {
        margin-bottom: 32rpx;

        .input-label {
          font-size: 28rpx;
          color: #333333;
          margin-bottom: 16rpx;
          display: block;
        }

        .question-textarea {
          width: 100%;
          min-height: 300rpx;
          padding: 24rpx;
          background: #f8f8f8;
          border-radius: 16rpx;
          font-size: 28rpx;
          color: #333333;
          line-height: 1.5;
          border: none;
          box-sizing: border-box;
        }

        .char-count {
          text-align: right;
          margin-top: 12rpx;

          .count-text {
            font-size: 24rpx;
            color: #999999;
          }
        }
      }
    }

    .popup-footer {
      padding: 32rpx;
      border-top: 1rpx solid #f0f0f0;

      .submit-btn {
        width: 100%;
        height: 88rpx;
        background: #539DF3;
        border-radius: 16rpx;
        border: none;
        display: flex;
        align-items: center;
        justify-content: center;

        &:disabled {
          background: #cccccc;
        }

        .submit-text {
          font-size: 32rpx;
          color: #FFFFFF;
          font-weight: bold;
        }
      }
    }
  }
}
</style>
